<!-- stros dialog 基本框架 -->
<template>
  <div class="BaseDialogHead">
    <div class="head my-flex flex-x-between flex-y-center">
      <div class="my-flex flex-y-center">
        <svg-icon :icon-class="iconClass" class-name="head-config-size" />
        <p class="head-title">{{ title }}</p>
      </div>

      <div
        class="head-close my-flex flex-x-center flex-y-center"
        @click="handleCloseDialog"
      >
        <svg-icon icon-class="guanbi12px" class-name="head-close-size" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'BaseDialogHead',
  // import引入的组件需要注入到对象中才能使用
  components: {},

  props: {
    iconClass: {
      type: String,
      default: 'gerenshezhi',
      require: true
    },
    title: {
      type: String,
      default: '',
      require: true
    }
  },
  data() {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  // 生命周期 - keep-alive
  async activated() {

  },
  // 方法集合
  methods: {
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next(vm => {

    })
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.BaseDialogHead {
  width: 100%;
  .head {
    width: 100%;
    &-title {
      margin-left: $FifthSpacing;
      @include FifthFont(#000,500);
    }

    &-config-size {
      width: 16px;
      height: 16px;
    }
    &-close {
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;

      &-size {
        width: 12px;
        height: 12px;
      }
    }
  }
}
</style>
